<template>
	<view class="page">
		<!-- <up-navbar title="练单词·二阶" @rightClick="{}" :autoBack="true" bgColor="#f1f1f1" placeholder></up-navbar> -->
		<view v-if="step<0" class="content  flex column box-sizing flex-center items-center width-full padding-30">
			<view class="imageBox">
			</view>
			<view class="textBox fontSize-28 box-sizing width-full padding-50">
				这段话,你只有{{list.length}}个生单词,超过80%
				的同龄人,厉害!
				这段话总共有{{list.length}}个单词,是你刚记过的
				单词,你知道他们是哪几个吗?
				我们一起看看它们和它们的家吧。

			</view>
		</view>
		<view v-if="step>-1" class="content flex column box-sizing padding-30">
			<view class="flex fontSize-28 marginBottom-20 width-full flex-center weight-700">
				{{texts.titles[step]}}

			</view>
			<view class="flex fontSize-28 marginBottom-50 color-696969 width-full flex-center">
				<!-- {{texts['setp'+step](list[round].wordHead)}} -->
				<view class="" v-html="texts['setp'+step](list[round].wordHead)"></view>
			</view>
			<view class="flex " :class="step!=1?'flex-wrap space-between':'column'">
				<view class="val bjCcc" @click="setForm(t,i)" :style="{width:step!=1?'calc(50% - 10rpx)':'calc(100%)'}"
					:class="texts.values[texts.keyValues[step]] == t?'borderBlue':'borderCcc'"
					v-for="(t,i) in texts.lists['list'+step](list[round])">
					{{t}}
				</view>
			</view>
		</view>
		<up-modal :show="editShow" confirmText="去查看" :content="`啊哦,选错了。没关系该单词在4-1-1-3位置我们再看一下。`" @close="cancel"
			@cancel="cancel" @confirm="setTitle" title=" "></up-modal>
		<up-popup :safeAreaInsetBottom="false" mode="center" closeable round="5" :show="phoneShow" @close="close"
			@open="phoneShow = true">
			<view class="popupBox fontSize-28">
				<view class="width-full weight-700 text-center">
					{{emitData.subscript}}块
				</view>

				<view class="flex column marginTop-30">
					<view class="flex items-center space-between height-120" v-for="(it,i) in emitData.wordList"
						:key="i">
						<view class="fontSize-30 weight-700" style="min-width: 200rpx;">
							{{parseInt(i)+1}}.{{it.wordHead}}
						</view>
						<!-- <view class="fontSize-28" >
							{{it.tran}}
						</view> -->
						<view class="width-full">
							<view class="wordsDefaultText fontSize-24 ">
								<view class="marginBottom-5" v-for="(t,id) in returnVal(it.tran)" :key="id">
									{{t}}
								</view>
							</view>
							<!-- <view class="wordsDefaultText fontSize-24" :class="type==1?activeData[index]?'wordsText':'hiddenText':!activeData[index]&&defaultActive&&index<defaultActive?'wordsText':'hiddenText'" v-html="returnVal(item.tran)"></view> -->
							<!-- <span v-if="type==2&&!activeData[index]&&defaultActive&&index<defaultActive">{{item.aa}}</span> -->
						</view>

					</view>
				</view>
				<view class="width-full marginTop-30 box-sizing btns flex column items-center flex-center">
					<view class="marginTop-30 flex flex-center" style="width: 80%;">
						<up-button @click="close()" size="normal" type="primary" plain text="记住了"></up-button>
					</view>
				</view>
			</view>
		</up-popup>
		<view class="width-full box-sizing btns flex column items-center flex-center">
			<view class="marginTop-30 flex flex-center" style="width: 80vw;">
				<up-button v-if="step<0" @click="toComponent" size="normal" type="primary" text="找位置"></up-button>
				<up-button v-if="step>-1" @click="next" size="normal" type="primary" text="确定"></up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		nextTick,
		inject
	} from 'vue'
	import {
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app'
	import {
		url
	} from '../../../uni_modules/uview-plus/libs/function/test';
	const gostartApi = inject('gostart');
	const addunwordsApi = inject('addunwords');
	const updateunwordsApi = inject('updateunwords');
	const getAreaWordsViewApi = inject('getAreaWordsView');
	// data
	const texts = ref({
		titles: ['找家人', '找序号', '找小区号', '找大区号', '找邻居'],
		setp0: (val) => {
			return `请选出与 <span class = "weight-700">${val}</span> 同区域的单词`
		},
		setp1: (val) => {
			return `请选出 <span class = "weight-700">${val}</span> 序号`
		},
		setp2: (val) => {
			return `请选出 <span class = "weight-700">${val}</span> 所在小区`
		},
		setp3: (val) => {
			return `请选出 <span class = "weight-700">${val}</span> 所在大区`
		},
		setp4: (val) => {
			return `请选出 <span class = "weight-700">${val}</span> 相邻的单词`
		},
		keyValues: ['jiaren_da', 'zxh_da', 'bigsort_da', 'smallsort_da', 'linju_da'],
		values: {
			pracun_id: '',
			practic_id: '',
			jiaren_da: '',
			zxh_da: '',
			bigsort_da: '',
			smallsort_da: '',
			linju_da: '',
		},
		rules: ['jiaren_ture', 'xh_ture', 'small_sort_ture', 'big_sort_ture', 'linju_ture'],
		lists: {
			list0: (list) => {
				return list.jiaren
			},
			list1: (list) => {
				return [1, 2, 3, 4, 5]
			},
			list2: (list) => {
				return [1, 2, 3, 4]
			},
			list3: (list) => {
				return [1, 2, 3, 4]
			},
			list4: (list) => {
				return list.linju
			},

		}

	})
	const editShow = ref(false);
	const emitData = ref({})
	const phoneShow = ref(false);
	const list = ref([]);
	const clickData = ref({});
	const step = ref(-1);
	const round = ref(0);
	const submitList = ref([])
	// created
	onLoad((op) => {
		// type.value = op.type ? op.type :''

		let data = op ? JSON.parse(op.data) : [];
		if (data.un_list) {
			list.value = data.un_list ? data.un_list : []
		}
		if (!data.un_list) {
			list.value = data
		}

		console.log(data, list, op, 'yyyyyyyyyyyyyyyyy')
		step.value = op.setp ? op.step : -1;
		round.value = op.round ? op.round : 0;
		texts.value.values = {
			pracun_id: list.value[round.value].pracun_id,
			practic_id: list.value[round.value].practic_id,
			jiaren_da: '',
			zxh_da: '',
			bigsort_da: '',
			smallsort_da: '',
			linju_da: '',
		}
	})
	const toComponent = () => {
		step.value = 0
		round.value = 0
	}
	// methods
	const setForm = (t, i) => {
		console.log('t', t)
		console.log('t', texts.value.values[texts.value.keyValues[step.value]])
		texts.value.values[texts.value.keyValues[step.value]] = t

	}
	const setSubmitList = () => {

	}
	const setTitle = () => {
		console.log('去查看')
		editShow.value = false
		getAreaWordsViewApi({
			page: list.value[round.value].page,
			big_sort: list.value[round.value].big_sort_ture,
			small_sort: list.value[round.value].small_sort_ture,
		}).then(res => {
			phoneShow.value = true
			emitData.value['subscript'] = list.value[round.value].big_sort_ture + '_' + list.value[round.value]
				.small_sort_ture;
			emitData.value['rem_count'] = res['rem_count'];
			emitData.value['sheng'] = res.unrem_count
			emitData.value['page'] = list.value[round.value].page
			emitData.value['big_sort'] = list.value[round.value].big_sort_ture;
			emitData.value['small_sort'] = list.value[round.value].small_sort_ture;
			emitData.value['wordList'] = res.wordList

		})
	}
	const close = () => {
		if (parseInt(round.value) + 1 == list.value.length) {
			// 结束了
			submitList.value = [...submitList.value, JSON.parse(JSON.stringify(texts.value.values))]
			texts.value.values = {
				pracun_id: list.value[round.value].pracun_id,
				practic_id: list.value[round.value].practic_id,
				jiaren_da: '',
				zxh_da: '',
				bigsort_da: '',
				smallsort_da: '',
				linju_da: '',
			}
			console.log(submitList.value, 'submitList.valuesubmitList.valuesubmitList.value1111')
			// return 
			updateunwordsApi({
				data: submitList.value
			}).then(res => {
				console.log(res, 'asdasdsazxxxxxxxxxxxxx')
				phoneShow.value = false
				uni.redirectTo({
					url: '/pages/index/practiceWoeds/total?practic_id=' + list.value[round.value]
						.practic_id
				})
			})

		} else {
			phoneShow.value = false
			step.value = 0
			round.value++
			submitList.value = [...submitList.value, JSON.parse(JSON.stringify(texts.value.values))]
			console.log(submitList.value, '3333333331111')
			texts.value.values = {
				pracun_id: list.value[round.value].pracun_id,
				practic_id: list.value[round.value].practic_id,
				jiaren_da: '',
				zxh_da: '',
				bigsort_da: '',
				smallsort_da: '',
				linju_da: '',
			}
		}

	}

	const cancel = () => {
		editShow.value = false
	}
	const returnVal = (val) => {
		let valList = val.split('<br>');
		let text = ''
		for (let s of valList) {
			text = `
				${text}
				${s}
			`
		}
		return valList
	}
	// const setTitle = ()=>{
	// 	editShow.value = false
	// 	// 打开弹窗 并取消循环
	// }


	const rule = () => {
		let clickVal = texts.value.values[texts.value.keyValues[step.value]];
		let targetValue = list.value[round.value][texts.value.rules[step.value]];
		if (clickVal === targetValue || (typeof targetValue === 'string' && targetValue.includes(clickVal)) || (Array
				.isArray(targetValue) && targetValue.includes(clickVal))) {
			step.value++;
			console.log(1111111111111);
		} else {
			editShow.value = true;
			console.log(222222222222222);
		}
	};
	const next = () => {
		// 这一轮已经结束了  判断是否开始下一轮
		if (step.value == 4) { //找邻居

			//找邻居，只要找对一个就成功跳转
			console.log('texts.value.values[texts.value.keyValues[step.value]]', texts.value.values[texts.value
				.keyValues[step.value]])
			// let linjuArray = list.value.linju_ture.split(",");

			if (parseInt(round.value) + 1 == list.value.length) {
				// 结束了
				submitList.value = [...submitList.value, JSON.parse(JSON.stringify(texts.value.values))]
				texts.value.values = {
					pracun_id: list.value[round.value].pracun_id,
					practic_id: list.value[round.value].practic_id,
					jiaren_da: '',
					zxh_da: '',
					bigsort_da: '',
					smallsort_da: '',
					linju_da: '',
				}
				console.log(submitList.value, 'submitList.valuesubmitList.valuesubmitList.value1111')
				updateunwordsApi({
					data: submitList.value
				}).then(res => {
					console.log(res, 'asdasdsazxxxxxxxxxxxxx')
					uni.redirectTo({
						url: '/pages/index/practiceWoeds/total?practic_id=' + list.value[round.value]
							.practic_id
					})
				})
			} else {
				rule()
				if (editShow.value == false) {
					step.value = 0
					round.value++
					submitList.value = [...submitList.value, JSON.parse(JSON.stringify(texts.value.values))]
					console.log(submitList.value, '3333333331111')
					texts.value.values = {
						pracun_id: list.value[round.value].pracun_id,
						practic_id: list.value[round.value].practic_id,
						jiaren_da: '',
						zxh_da: '',
						bigsort_da: '',
						smallsort_da: '',
						linju_da: '',
					}
				}

			}
		} else {
			rule()
		}
	}
</script>

<style lang="scss" scoped>
	.btns {
		padding-bottom: calc(50rpx);
	}

	.imageBox {
		height: 300rpx;
		width: 300rpx;
		overflow: hidden;
	}

	.imageBj {
		height: 300rpx;
		width: 300rpx;
		// scale: 1.15;
	}

	.textBox {
		line-height: 45rpx;
	}

	.borderBlue {
		border: 1rpx solid #3c9cff;
		color: #3c9cff;
	}

	.borderCcc {
		border: 1rpx solid #ededed;
		color: #333;
	}

	.bjBlue {
		background-color: #3c9cff;
	}

	.bjCcc {
		background-color: #ededed;
	}

	.bjCcc1 {
		background: linear-gradient(to right, #ababab, #f1f1f1);
	}

	.val {
		// width: calc(50% - 10rpx);
		margin-bottom: 20rpx;
		padding: 20rpx 0;
		display: flex;
		justify-content: center;
		border-radius: 8rpx;

	}

	.popupBox {
		width: 80vw;
		padding: 50rpx 30rpx 30rpx;
		// background-color: #fff;
		// border-radius: 5px;
		box-sizing: border-box;

		.btns {
			// padding-bottom: calc(50rpx);
		}
	}
</style>